<template>
	<view style="background:#f2f5fa;overflow: hidden;">
		<view class="ssList-wrap"@click="goPage('/subpkg/newsContent/newsContent',{pageName:'noticeList',id:tongzhiId})"
		style="background:#fff;padding:30rpx;border-radius:100rpx;">
			<u-text :text="tongzhi" lines="1" align="center"/>
		</view>
		<view class="ssList-wrap">
			<view class="u-list">
				<view class="u-list-item" v-for="(item, index) in indexList" :key="index">
					<view @click="saishiInfoClick(item)">
						<u--image :src="item.matchImg"  width="630rpx" height="393.75rpx" />
						<view class="ssList-text">
							<view class="ssListInfo">
								<u--text :text="item.matchTitle" color="#434655" size="16" lineHeight="60rpx"/>
								<u--text  :text="'截止时间：'+item.endTime" color="#b0b0b0" size="13"/>
							</view>
							<u-tag :text="item.matchStatus=='2'?'已完成':item.matchStatus=='1'?'进行中':item.matchStatus=='0'?'待开始':''" 
							:type="item.matchStatus=='2'?'success':item.matchStatus=='1'?'':item.matchStatus=='0'?'warning':''" 
							plain plainFill size="mini"> </u-tag>
						</view>	
					</view>
					<view class="button-wrap" style="display: flex;flex-wrap: wrap;" >
						<view   v-for="(it,i) in item.formVos" :key="i" style="margin-bottom:5px;padding-right:5px;"
						v-if="item.matchTemplate&&it.formStatus==0&&Date.parse(it.endTime)>Date.now()"
						>
							<u-button @click="goPage('/subpkg/saishiXiangqing/saishiXiangqing',{matchId:item.matchId,formId:it.formId,formStatus:it.formStatus})"
							:custom-style="buttonStyle" 
								:text="'详情'" type="warning"  />
						</view>
						<view v-for="(it,i) in item.formVos" :key="i" style="margin-bottom:5px;padding-right:5px;" v-if="it.formStatus==0&&Date.parse(it.endTime)>Date.now()">
							<u-button @click="goPage('/subpkg/saishibaoming/saishibaoming',{matchId:item.matchId,formId:it.formId})"
							:custom-style="buttonStyle" 
							:text="it.formName+'报名'"  type="info"/>
							
						</view>
						
					</view>
				</view>
			</view>
		</view>
	</view>
</view>
</template>

<script>
	export default {
		props:{
			indexList:{
				type:Array,
				default:[]
			},
			tongzhi:{
				type:String,
				default:''
			},
			tongzhiId:{
				type:Number,
				default:0
			}
		},
		name:"saishiList",   
		data() {
			return {
				buttonStyle:{padding:'0px 20px',color:'rgb(232,160,60)',border:'1px solid rgb(245,218,77)',fontSize:'12px',lineHeight:0,background:'rgb(253,246,236)',height:'30px'}
			};
		},
		methods:{
			//路由跳转
			goPage(url,obj){
				uni.$u.route(url,obj);
			},
			
			saishiInfoClick(item){
				if(!item.matchTemplate) return uni.$u.toast('未配置详情页面')
				this.goPage('/subpkg/saishiXiangqing/saishiXiangqing',{matchId:item.matchId,matchLogo:item.matchLogo,isBm:1})
			}
		},
		//解决deep不生效
		options: {
					styleIsolation: 'shared'
				}
	}
</script>

<style lang="scss" scoped>
	.ssList-wrap{margin:20rpx 30rpx;
		.u-list-item{padding:30rpx;background: #fff;border-radius: 11px;margin-bottom: 10px;overflow: hidden;}
		image{border-top-right-radius: 11px;border-top-left-radius: 11px;}
		.ssList-text{margin:10px 5px;display: flex;justify-content: space-between;align-items:flex-end}
	}
	.button-wrap {
		::v-deep .u-button--active{background-color: rgb(253,246,236) !important;}
		::v-deep .u-button--active::before{background-color: rgb(253,246,236) !important;}
		}
		
		
	</style>